<template>
<div class="linkage flex-row flex-align-c" v-loading="loading" element-loading-spinner="el-icon-loading">
    <el-select class="el-input-resize--mini address" size="small" v-model="Provincial" @change="choseProvince" placeholder="省级地区">
        <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id">
        </el-option>
    </el-select>
    <el-select class="el-input-resize--mini address" size="small" v-model="cityItem" @change="choseCity" placeholder="市级地区">
        <el-option v-for="item in cityList" :key="item.id" :label="item.value" :value="item.id">
        </el-option>
    </el-select>
    <el-select class="el-input-resize--mini address" size="small" v-model="area" @change="choseBlock" placeholder="区级地区">
        <el-option v-for="item in areaList" :key="item.id" :label="item.value" :value="item.id">
        </el-option>
    </el-select>
</div>
</template>

<script>
import $axios from 'axios'
import defaultConfig from './utils/config'
import Cookies from 'js-cookie'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  watch: {
    'config.initList': {
      handler(newData, oldData) {
        if (Array.isArray(newData) && newData.length > 0) {
          const [Provincial = {}, cityItem = {}, area = {}] = newData
          this.Provincial = Provincial.id.toString() || Provincial.value.id.toString()

          this.cityItem = cityItem.id.toString() || cityItem.value.id.toString()

          this.area = area.id.toString() || area.value.id.toString()
        }
      },
      immediate: false,
      deep: true
    }
  },
  data() {
    return {
      loading: false,
      mapJson: defaultConfig.mapJson,
      province: [],
      Provincial: '',
      cityItem: '',
      cityList: [],
      area: '',
      areaList: [],
      cityName: '',
      block: ''
    }
  },
  methods: {
    getCityData: function() {
      var that = this
      const requerBase = that.mapJson.substr(1, that.mapJson.length - 1)
      const baseRequest = `${Cookies.get('BASE_API') || `${process.env.BASE_API}/`}${requerBase}`
      $axios
        .get(baseRequest)
        .then(function(response) {
          if (response.status === 200) {
            var data = response.data
            that.province = []
            that.cityName = []
            that.block = []
            for (var item in data) {
              // console.log("item++++++++++++++++++++++",item)
              if (item.match(/0000000$/)) {
                that.province.push({
                  id: item,
                  value: data[item],
                  children: []
                })
              } else if (item.match(/00000$/)) {
                that.cityName.push({
                  id: item,
                  value: data[item],
                  children: []
                })
              } else {
                that.block.push({
                  id: item,
                  value: data[item]
                })
              }
            }
            console.log(that.province, 'that.province=========')
            console.log(that.block, 'that.province=========')
            for (var index in that.province) {
              for (var index1 in that.cityName) {
                if (
                  that.province[index].id.slice(0, 2) ===
                  that.cityName[index1].id.slice(0, 2)
                ) {
                  that.province[index].children.push(that.cityName[index1])
                }
              }
            }

            for (var item1 in that.cityName) {
              for (var item2 in that.block) {
                if (
                  that.block[item2].id.slice(0, 4) ===
                  that.cityName[item1].id.slice(0, 4)
                ) {
                  that.cityName[item1].children.push(that.block[item2])
                }
              }
            }

            setTimeout(() => {
              that.choseProvince(that.Provincial, that.cityItem, that.area)
              that.loading = false
            }, 500)
          } else {
            console.log(response.status)
            that.loading = false
          }
        })
        .catch(function(error) {
          console.log(typeof +error)
          that.loading = false
        })
    },
    choseProvince: function(e) { // 省
      console.log(e, 'choseProvince')
      console.log(this.province, 'this.province=========')
      for (var index2 in this.province) {
        if (e === this.province[index2].id) {
          this.cityList = this.province[index2].children
          if (arguments.length === 3) {
            const [, cityItem, area] = arguments
            const areaIndex = this.province[index2].children.findIndex(item => {
              return item.id === cityItem
            })
            if (this.areaIndex !== -1) {
              this.areaList = this.province[index2].children[areaIndex].children
            }
            this.cityItem = cityItem
            this.area = area
          } else {
            this.areaList = this.province[index2].children[0].children
            this.cityItem = this.province[index2].children[0].id
            this.area = this.province[index2].children[0].children[0].id
          }
          console.log('fdfffff.....',this.areaList)
          this.E = this.areaList[0].id
          this.output()
        }
      }
    },
    choseCity: function(e) { // 市
      for (var index3 in this.cityName) {
        if (e === this.cityName[index3].id) {
          this.areaList = this.cityName[index3].children
          this.area = this.cityName[index3].children[0].id
          this.E = this.areaList[0].id
          this.output()
        }
      }
    },
    choseBlock: function(e) { // 区
      this.E = e
      this.output()
      console.log('this.E', this.E)
    },
    output() {
      const outPutData = [{
        id: `${this.Provincial}`
      }, {
        id: `${this.cityItem}`
      }, {
        id: `${this.area}`
      }]
      console.log(...outPutData)
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        this.changeEvt(outPutData, this.updateConfig.bindKey)
      }
    }
  },
  created: function() {
    this.loading = true
    this.getCityData()
  }
}
</script>

<style lang="scss" scoped>
.linkage {
  /deep/ .el-input,/deep/ .el-input-number{
    width: auto !important;
    margin-right: 10px;
  }
}
</style>
